import React from 'react'
import './target.css'
import { ArrowLeft, Plus } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom'

export default function Target() {
  const Navigate=useNavigate()
  return (
    <div className='target'>
      <div className='target-head'>
        <span className='set-head-bor'><ArrowLeft onClick={()=>{Navigate('/set')}} /></span>
        <span>目标跟踪</span>
        <span className='target-head-bor'><Plus  /></span>
      </div>

      <div className='target-content'>
        <div className='target-content-bor'>
            <div className='target-con'>
                <span className='target-con-gre' style={{color:'#fff',background:'green'}}>目标</span>
                <span className='target-con-gre'>历史记录</span>
            </div>
            <div className='target-content-orange' onClick={()=>{Navigate('/motion')}}>
                <span>骑车</span>
                <p style={{color:"#797979"}}>kcal</p>
            </div>
            <div className='target-content-purple' onClick={()=>{Navigate('/steps')}}>
                <span>跑步</span>
                <p style={{color:"#797979"}}>kcal</p>
            </div>
        </div>
      </div>
    </div>
  )
}
